<template>
  <div class="main_back">

    <div v-if="!userAccount" class="container">
      <div ref="eeee" class="card_div">
        <van-image width="60%" style="margin-left: 20%;margin-bottom: 20px;margin-top: 10px;" src="/images/logo.svg" />
        <van-form validate-first @failed="onFailed">

          <van-icon name="/images/mob-icon-user.svg"  style="position: relative;top:32px;left:10px;z-index: 10000;"/>
          <van-field
              v-if="step_phoneNumber"
              v-model="gModel.qy_code"
              name=""
              label=""
              placeholder="请输入企业码"
              :rules="[{ required: true, message: '' }]"
              @field-label-color="'red'"
              style="height: 42px;font-size: 16px;color: #999999;background-color: #EEF2FB;padding-left: 32px; box-shadow: 0px 0px 2px rgba(0,37,57,0.2);"
          />
          <van-button block type="info" size="normal"
                      @click="onSubmitByPhoneNumber"
                      :disabled="gModel.qy_code==null || gModel.qy_code==''"
                      style="height: 42px;font-size: 18px;color: #ffffff;margin-top: 20px;">本机号码一键登录</van-button>
          <div v-if="step_phoneNumber" style="margin-left: 0px;margin-right: 0px;margin-top: 110px;text-align:right;">
            <span @click="userAccount=true"
                  style="color: rgb(12,115,254);font-size:16px;text-decoration: underline;text-underline-offset: 0.1em;cursor: pointer">
              已有账号登录</span>
          </div>
<!--          <div v-if="step_phoneNumber" v-show="false" style="background-color: #ffffff;">-->
<!--            <canvas-lock ref="canvas"></canvas-lock>-->
<!--          </div>-->
          <div style="margin-top: 20px;color: #06afea;font-size: 16px;">
            手机号免费体验用户，请使用<span style="color: #F56C6C;">电脑端浏览器</span>访问www.snbg365.com，免费体验全部功能。
          </div>
          <div style="margin-top: 20px;text-align: center;">
            <div style="float: left;border-top:1px #D6D7D8 solid;width: 80px;margin-top: 10px;"></div>
            <div style="float: right;border-top:1px #D6D7D8 solid;width: 80px;margin-top: 10px;"></div>
            <span style="color: #D6D7D8;font-size: 16px;">显示模式选择</span>
          </div>
          <div style="margin-top: 20px;">
            <div style="float: left;margin-left: 45px;" @click="showPc=true">
              <img :src="showPc ? '/images/mob-turn-pc-02.svg' : '/images/mob-turn-pc-01.svg' " style="height: 30px;"/>
              <div style="margin-top: 10px;">
                <span v-if="showPc" style="color: #3899FB">PC版</span>
                <span v-if="!showPc" style="color: #B6B6B6">PC版</span>
              </div>
            </div>
            <div style="float: right;margin-right: 45px;" @click="showPc=false">
              <img :src="!showPc ? '/images/mob-turn-mobile-02.svg' : '/images/mob-turn-mobile-01.svg' " style="height: 30px;"/>
              <div style="margin-top: 10px;margin-left: -5px;">
                <span v-if="!showPc" style="color: #3899FB">移动版</span>
                <span v-if="showPc" style="color: #B6B6B6">移动版</span>
              </div>
            </div>
          </div>
        </van-form>
      </div>
    </div>

    <div v-if="userAccount" class="container">
      <div ref="eeee" class="card_div">
        <van-image width="60%" style="margin-left: 20%;margin-bottom: 20px;margin-top: 10px;" src="/images/logo.svg" />
        <van-form @submit="onSubmit" validate-first @failed="onFailed">
          <van-icon name="/images/mob-icon-user.svg"  style="position: relative;top:32px;left:10px;z-index: 10000;"/>
          <van-icon name="/images/mob-icon-lock.svg"  style="position: relative;top:102px;left:-5px;z-index: 10000;"/>
          <van-field
              v-model="model.id"
              name=""
              label=""
              placeholder="请输入用户名称"
              :rules="[{ required: true, message: '' }]"
              @field-label-color="'red'"
              style="height: 42px;font-size: 16px;color: #999999;background-color: #EEF2FB;padding-left: 32px; box-shadow: 0px 0px 2px rgba(0,37,57,0.2);"
          />
          <van-field
              v-model="model.pwd"
              type="password"
              name=""
              label=""
              placeholder="请输入用户密码"
              :rules="[{ required: true, message: '' }]"
              style="height: 42px;font-size: 16px;color: #999999;background-color: #EEF2FB;padding-left: 32px;margin-top: 28px; box-shadow: 0px 0px 2px rgba(0,37,57,0.2);"
          />
          <template v-if="model.msg!=''">
            <span style="color:red;line-height:30px;padding-left:5px;">{{ model.msg }}</span>
          </template>
          <div style="margin-left: 0px;margin-right: 0px;margin-top: 40px;">
            <van-button block type="info" native-type="submit" size="normal"
                        style="height: 42px;font-size: 18px;color: #ffffff;">登录</van-button>
          </div>
          <div v-if="false" style="margin-left: 0px;margin-right: 0px;margin-top: 20px;text-align:right;">
            <span @click="userAccount=false"
                  style="color: rgb(12,115,254);font-size:16px;text-decoration: underline;text-underline-offset: 0.1em;cursor: pointer">
              手机号登录</span>
          </div>
          <div style="margin-top: 20px;color: #06afea;font-size: 16px;">
            手机号免费体验用户，请使用<span style="color: #F56C6C;">电脑端浏览器</span>访问www.snbg365.com，免费体验全部功能。
          </div>
          <div style="margin-top: 20px;text-align: center;">
            <div style="float: left;border-top:1px #D6D7D8 solid;width: 80px;margin-top: 10px;"></div>
            <div style="float: right;border-top:1px #D6D7D8 solid;width: 80px;margin-top: 10px;"></div>
            <span style="color: #D6D7D8;font-size: 16px;">显示模式选择</span>
          </div>
          <div style="margin-top: 20px;">
            <div style="float: left;margin-left: 45px;" @click="showPc=true">
              <img :src="showPc ? '/images/mob-turn-pc-02.svg' : '/images/mob-turn-pc-01.svg' " style="height: 30px;"/>
              <div style="margin-top: 10px;">
                <span v-if="showPc" style="color: #3899FB">PC版</span>
                <span v-if="!showPc" style="color: #B6B6B6">PC版</span>
              </div>
            </div>
            <div style="float: right;margin-right: 45px;" @click="showPc=false">
              <img :src="!showPc ? '/images/mob-turn-mobile-02.svg' : '/images/mob-turn-mobile-01.svg' " style="height: 30px;"/>
              <div style="margin-top: 10px;margin-left: -5px;">
                <span v-if="!showPc" style="color: #3899FB">移动版</span>
                <span v-if="showPc" style="color: #B6B6B6">移动版</span>
              </div>
            </div>
          </div>
        </van-form>
      </div>
    </div>

    <van-popup v-model="editPassShow" position="bottom" :style="{height:'100%'}" closeable>
      <van-form @submit="editPass" validate-first @failed="onFailed">
        <van-field v-model="editModel.oldPass" type="password" name="当前密码" label="当前密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <van-field v-model="editModel.newPass" type="password" name="新密码" label="新密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <van-field v-model="editModel.newPass_2" type="password" name="重复新密码" label="重复新密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin:10px;color:#666;background:#FAFFBF;padding:10px;line-height:25px;">
          温馨提示：<br />
          1.密码设置要求长度不应小于8位，且须包含英文大写字母、小写字母、数字和特殊符号。<br />
        </div>
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">确定</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
// import { CanvasLock } from 'vue-lock';
export default {
  // components: {
  //   CanvasLock,
  // },
  data() {
    return {
      loading: false,

      userAccount:true,

      gModel:{qy_code:'',msg: ''},
      step_phoneNumber:true,

      model: {id: '', pwd: '', msg: ''},
      editPassShow:false,
      editModel:{ newPass: null, newPass_2: null, oldPass: null, id: null },

      showPc:false,
    }
  },
  created() {
    //sessionStorage.clear();
    this.showPc = sessionStorage.getItem('show_pc') == 'yes';
  },
  mounted() {
    //localStorage.clear();
    this.gModel.qy_code = localStorage.getItem("qy_code");
  },
  methods: {
    onFailed(errorInfo) {
      //console.log('failed', errorInfo);
    },

    async onSubmitByPhoneNumber(){
      if(this.em(this.gModel.qy_code)){ this.$toast.fail("需填写企业码"); }
      localStorage.setItem("qy_code",this.gModel.qy_code);

      this.$toast.success('res.yzm');
    },

    async onSubmit() {
      this.loading = true;

      sessionStorage.setItem('show_pc',this.showPc?'yes':'no');

      let res = await elm.post("/system/login/AuthLogin", {
        id: this.model.id,
        pwd: this.model.pwd,
        client:(elm.isMobile?"移动端":"电脑端"),
        url: elm.query("url")
      });
      console.log('登录：', res);
      if (res.success == true) {
        elm.info.token = res.token;
        if (res.authpage == "pass_eidt") {
          this.loading = false;
          this.$toast.fail("您的密码强度不够，请修改密码后重新登录！");
          this.showEditPass();
          return;
        }
        elm.info.system = res.system;
        elm.info.menu = res.menu;
        elm.info.user = res.user;
        elm.info.org = res.org;
        elm.info.role = res.role;
        this.$router.push({ path:elm.info.system.path });
        //location.href = elm.settings.routefix + elm.info.system.path;
        //记录日志
        let oper_log = {};
        oper_log.oper_type = "1"; //手机
        oper_log.user_name = this.model.id;
        oper_log.nick_name = res.user.name;
        oper_log.menu_title = "/system/login/AuthLogin";
        oper_log.oper_time = new Date().toLocaleString();
        oper_log.msg = "登录";
        await elm.post('/system/login/log/Upsert', oper_log);
      } else if (res.success == false || res.status == 401) {
        this.model.msg = "用户名或密码错误。";
      } else {
        this.model.msg = "登录失败，请稍后重试。";
      }
      this.loading = false;
    },

    showEditPass(){
      this.editModel = { newPass: null, newPass_2: null, oldPass: null, id: this.model.id };
      this.editPassShow = true;
    },
    async editPass() {
      if (this.editModel.oldPass == this.editModel.newPass) {
        this.$toast.fail('您填写的新旧密码内容相同。');
        return;
      }
      if (this.editModel.newPass != this.editModel.newPass_2) {
        this.$toast.fail('两次填写的新密码不一致。');
        return;
      }
      if(!this.validatePassword(this.editModel.newPass))
      {
        this.$toast.fail("新密码强度不够，请按照提示要求设定新密码。");
        return;
      }
      let res = await elm.post('/system/login/EditPassword', this.editModel);
      if (res.status != 'success') {
        this.$message.error("新密码强度不够，请按照提示要求设定新密码。");
        return;
      }
      else {
        this.$toast.success('密码修改成功。');
        this.editPassShow = false;
      }
    },
    validatePassword(password) {
      const lengthRequirement = password.length >= 8;
      const upperCaseRequirement = /[A-Z]/.test(password);
      const lowerCaseRequirement = /[a-z]/.test(password);
      const numberRequirement = /[0-9]/.test(password);
      const specialCharRequirement = /[!@#$%^&*(),.?":{}|<>]/.test(password);
      return lengthRequirement && upperCaseRequirement && lowerCaseRequirement && numberRequirement && specialCharRequirement;
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
};
</script>
<style>

html,body,#app{ height: 100%; }
.main_back{
  /*background-color: #D9E8FB;*/
  background-image: url('/images/mob-back.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f8f8ff;
  height: 100%;
}
.container{
}

</style>

<style scoped>
.container{
  padding-left: 8%;
  padding-right: 8%;
  padding-top: 25%;
  /*border:1px red solid;*/
}
.card_div{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 90px;
  height: 320px;
  /*border:1px red solid;*/

  /*border-radius: 3px;*/
  /*box-shadow: 0px 0px 10px rgba(0,0,0,0.3);*/
  /*background-color: #F7FAFE;*/
  /*opacity: 0.9;*/

}
</style>